<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">		
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
		<!--在iPhone 手机上禁止了把数字转化为拨号链接-->
	    <meta content="telephone=no" name="format-detection" />
	    <!--删除默认的苹果工具栏和菜单栏-->
	    <meta content="yes" name="apple-mobile-web-app-capable">
	    <!-- 网站开启对web app程序的支持，在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
   		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/demo.css" type="text/css" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				position: relative;
				background-position: center;
				width: 100%;
				height: 100%;
				overflow-y: hidden;
				background:url(images/bj.jpg) no-repeat top left;
				background-size:  100%;
				overflow: hidden;
			}
			.couten {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.couten li {
				position: absolute;
				animation: all 3s linear;
				top:0px;
				left:0px;
				-webkit-tap-highlight-color:  rgba(0, 0, 0, 0);
				/* animation:myfirst 2s;
				-webkit-animation:myfirst 2s; */
			}
			@-webkit-keyframes myfirst /* Safari and Chrome */
			{
				0%   {bottom:0%;}
				25%  {bottom:50%;}
				50%  {bottom:50%;}
				75%  { bottom:50%;}
				100% {bottom:50%;}
        	}
			.couten li a{
				display: inline-block;
			}
			.mo {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .2);
				z-index: 100;
				display: none;
			}
			.mo .sen {
				width: 70%;
				height: 150px;
				border-radius: 5px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			.mo .sen img {
			    width: 60%;
			    height: 127px;
			    position: absolute;
			    top: 0px;
			    left: 0;
			    right: 0;
			    bottom: 212px;
			    margin: auto;
			    vertical-align: top;
			}
			.mo .sen h3 {
			    width: 50%;
			    height: 30px;
			    position: absolute;
			    top: -35px;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    margin: auto;
			    text-align: center;
			    color: red;
			    font-size: 140%;
			    font-weight: bold;
			    z-index: 999;
			}
			.mo .sen a {
			    width: 26%;
			    height: 50px;
			    background-color: rgb(174, 222, 244);
			    box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset;
			    position: absolute;
			    top: 100px;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    margin: auto;
			    color: #fff;
			    border-radius: 5px;
			    text-align: center;
			    line-height: 50px;
			    text-decoration: none;
			}
			.backward{
				width: 100%;
				background:#ccc;
				opacity: 0.5;
				position: absolute;
				top: 0;
				
			}
			.backward span{
				display: inline-block;
				width: 100px;
				height: 100px;
				color: #000;
				font-weight: bold;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				line-height: 100px;
				font-size: 1000%;
			}
			.countMoney{
				position: absolute;
				top: 8px;
				left: 8px;
				font-size: 12px;
				color: #eac60b;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var win = (parseInt($(".couten").css("width"))) - 60;
				$("body").css("height", window.screen.availHeight);
				$(".mo").css("height", window.screen.availHeight);
				$(".couten").css("width", window.screen.availWidth);
				$(".couten").css("height", window.screen.availHeight);
				$(".backward").css("height", window.screen.availHeight);
				// 点击确认的时候关闭模态层
				$(".sen a").click(function(){
				  $(".mo").css("display", "none")
				});
				var del = function(){
					nums++;
					$(".li" + nums).remove();
					setTimeout(del,100)
				}
				var stop=false;
				var add = function() {
					var hb = parseInt(Math.random() * (3 - 1) + 1);
					var Wh =70;
					var Left = parseInt(Math.random() * (win - 0) + 0);
					var rot = (parseInt(Math.random() * (35 - (-30)) - 45)) + "deg";
					num++;
					$(".couten").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png'></a></li>");
					$(".li" + num).css({
						"left": Left,
					});
					$(".li" + num + " a img").css({
						"width": Wh,
						"transform": "rotate(" + rot + ")",
						"-webkit-transform": "rotate(" + rot + ")",
						"-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */
						"-moz-transform": "rotate(" + rot + ")", /* Firefox */
						"-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */
						"-o-transform": "rotate(" + rot + ")" /* Opera */
					});	
					$(".li" + num).animate({'top':$(window).height()},1500,function(){
						//删掉已经显示的红包
						this.remove();
					});
					//点击红包的时候弹出模态层
					$(".li" + num).click(function(){
					//  $(".mo").css("display", "block")
						clickcount++;
						this.remove();
						$(".countMoney b").text(clickcount);
					});
					if(!stop){
						setTimeout(add,100);
					}
				}	
				var clickcount=0;
				//增加红包
				var num = 0;
				setTimeout(add,3000);
				// 红包雨时长
				var endTime=20;
				var finishendTime = function(){
					endTime--;
					if(endTime>0){
						console.log(endTime);
					}else{
						stop=true;
						//console.log(clickcount);
						clearTimeout(add); 
						clearTimeout(finishendTime); 
						return;
					}
					setTimeout(finishendTime,1000);
				}
				//倒数计时进入红包页面
				var backward = function(){
					numz--;
					if(numz>0){
						$(".backward span").html(numz);
					}else{
						console.log(numz+"yuyu");
						$(".backward").remove();
						finishendTime();
						clearTimeout(backward);
						return;
					}
					setTimeout(backward,1000)
				}
				var numz = 4;
				backward();
			})
		</script>
	</head>
	<body>
		<ul class="couten">
			<!--<li>
				<a href="#"><img src="images/hb_1.png"></a>
			</li>-->
		</ul>
		<p class='countMoney'>累计红包钱数<b>0</b></p>
		<div class="mo">
			<div class="sen">
				<img src="images/gx.png">
				<h3>获得红包3元</h3>
				<a href="#">确定</a>
			</div>
		</div>
		<div class="backward">
			<span></span>
		</div>		
	</body>
</html>